import * as React from 'react';
const { useRef, useMemo } = React;
import * as echarts from 'echarts';
import echartTheme from '../../common/data/echarts-theme';
import chinaMap from '../../common/data/china';
import { Empty } from 'antd';

import './index.less';

echarts.registerTheme('westeros', echartTheme);
echarts.registerMap('china', chinaMap);

interface chartProps {
    option: object,
    styleName?: string,
    clickFunc?: Function
}

export default function Chart(props: chartProps) {
    if (!props.option) {
        return <Empty style={{
            top: '50%',
            position: 'absolute',
            left: '50%',
            transform: 'translate(-50%, -50%)'
        }}></Empty>;
    }

    const chartDom = useRef(null);
    React.useEffect(() => {
        const charts = echarts.init(chartDom.current, 'westeros');
        if (props.clickFunc) {
            charts.off('click');
            charts.on('click', function (params) {
                props.clickFunc(params);
            });
        }
        charts.clear();
        charts.setOption(props.option);
    }, [props]);

    return (
        <div className={props.styleName || "appchart"} key={JSON.stringify(props.option)} ref={chartDom}></div>
    )
}